{extend name="public/layout" /}
{block name="content"}
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">用户登录</div>

                <div class="panel-body">
                    <form id='model-form' class="form-horizontal" method="POST" action="{:url('login/save')}">
                        {:token()}
                        <div class="form-group">
                            <label for="mobile" class="col-md-4 control-label">手机号码</label>

                            <div class="col-md-6">
                                <input id="mobile" type="mobile" class="form-control" name="mobile" value="" required autofocus>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password" class="col-md-4 control-label">登录密码</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember"> 记住密码
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    登录
                                </button>
                                <a class="btn btn-link" href="{:url('password/reset')}">
                                    忘记密码
                                </a>
                                <a class="btn btn-link" href="{:url('register/create')}">
                                    注册新账号
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
<script src="/static/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/static/plugins/jquery-validation/bootstrap.validate.js"></script>
<script type="text/javascript">
    jQuery(function($){
        $("form#model-form").validate({
            rules:{
                "mobile":{
                    required: true
                }, "password":{
                    required: true
                }
            },
            messages:{
                "mobile":{
                    required: "手机号码不能为空"
                }, "password":{
                    required: "登录密码不能为空"
                }
            },
            highlight:function(element) {
                $(element).parents('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).parents('.form-group').removeClass('has-error');
            },
            submitHandler: function(form){
                var $form = $(form);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    dataType: "JSON",
                    data: $form.serialize(),
                    success: function(data){
                        if(data.code){
                            location.href = data["url"];
                        }else{
                            alert(data["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });
    });
</script>
{/block}